<template>
    <view>


        <view class="zuncheng">
            <view style="color: blue;" @click="guanbi">关闭</view>
            <view>工单类型</view>
            <view></view>
        </view>
        <view class="wei">
            <p>普通工单</p>
            <p @click="duigou"><img src="/static/duigou.png" alt=""
                    style=" margin-right: 15px; vertical-align: middle; width: 20px;height: 20px;" @click="duigou"
                    v-if="showImage"><span style="background-color: white; display: block;width: 20px;height: 20px;"></span>
            </p>
        </view>
        <view class="wei">
            <p>维修工单</p>
            <p @click="duigou"><img src="/static/duigou1.png" alt=""
                    style=" margin-right: 15px; vertical-align: middle; width: 20px;height: 20px;" @click="duigoua"
                    v-if="showImagea"><span style="display: block;width: 20px;height: 20px;"></span></p>
        </view>
        <view class="wei">
            <p>售后工单</p>
            <p @click="duigou"><img src="/static/duigou1.png" alt=""
                    style=" margin-right: 15px; vertical-align: middle; width: 20px;height: 20px;" @click="duigoua"
                    v-if="showImagea"><span style="display: block;width: 20px;height: 20px;"></span></p>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";

const showImage = ref(false);
const duigou = () => {
    showImage.value = !showImage.value;
}
const guanbi = () => {
    uni.navigateBack({
        delta: 1
    })
}
const showImagea = ref(false);
const duigoua = () => {
    showImagea.value = !showImagea.value;

}


</script>

<style lang="scss">
#display {
    display: none;

}

.wei {
    display: flex;
    height: 40px;
    line-height: 40px;
    justify-content: space-between;
    padding: 10px 10px;
    border-bottom: 1px solid #ccc;
}

.zuncheng {
    display: flex;
    margin-top: 50px;
    justify-content: space-between;
    padding: 10px 10px;
    border-bottom: 1px solid #ccc;
}
</style>